<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
  <!-- BEGIN: Head-->
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google.">
    <meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template, eCommerce dashboard, analytic dashboard">
    <meta name="author" content="ThemeSelect">
    <title>生态圈系统-费用结算</title>
    <link rel="icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="apple-touch-icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="css/bootstrap.min.css" th:href="@{/css/bootstrap.css}" type="text/css" rel="stylesheet"/>
    <!-- BEGIN: VENDOR CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/vendors.min.css" th:href="@{/app-assets/vendors/vendors.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/flag-icon/css/flag-icon.min.css" th:href="@{/app-assets/vendors/flag-icon/css/flag-icon.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/css/jquery.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/css/jquery.dataTables.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/css/select.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/css/select.dataTables.min.css}">
    <!-- END: VENDOR CSS-->
    <!-- BEGIN: Page Level CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/vertical-gradient-menu-template/materialize.css" th:href="@{/app-assets/css/themes/vertical-gradient-menu-template/materialize.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/vertical-gradient-menu-template/style.css" th:href="@{/app-assets/css/themes/vertical-gradient-menu-template/style.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/pages/data-tables.css" th:href="@{/app-assets/css/pages/data-tables.css}">
    <!-- END: Page Level CSS-->
    <!-- BEGIN: Custom CSS-->
    <link href="plugins/bootstrap-datepicker/css/bootstrap-datepicker.css" th:href="@{/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css}" type="text/css" rel="stylesheet"/>
	  <link href="plugins/bootstrap-sweetalert/sweetalert.css" th:href="@{/plugins/bootstrap-sweetalert/sweetalert.css}" type="text/css" rel="stylesheet"/>
	  <link rel="stylesheet" type="text/css" href="../../../app-assets/css/custom/custom.css" th:href="@{/app-assets/css/custom/custom.css}">
    <!-- END: Custom CSS-->
  </head>
  <!-- END: Head-->
  <body class="vertical-layout page-header-light vertical-menu-collapsible vertical-gradient-menu 2-columns" data-open="click" data-menu="vertical-gradient-menu" data-col="2-columns">

    <!-- BEGIN: Header-->
    <div th:replace="common/header :: header"></div>
    <!-- END: Header-->

    <div th:replace="common/aside_admin :: aside"></div>

    <!-- BEGIN: Page Main-->
    <div id="main">
      <div class="row">
        <div class="pt-3 pb-1" id="breadcrumbs-wrapper">
          <!-- Search for small screen-->
          <div class="container">
            <div class="row">
              <div class="col s12 m6 l6">
                <h5 class="breadcrumbs-title mt-0 mb-0" id="page-title" active-menu="settlement-menu">费用结算</h5>
              </div>
              <div class="col s12 m6 l6 right-align-md hide">
                <ol class="breadcrumbs mb-0">
                  <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                  <li class="breadcrumb-item"><a href="#">Pages</a></li>
                  <li class="breadcrumb-item active">Blank Page</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="col s12">
          <div class="container">
            <div class="section section-data-tables">
              <div class="row">
                <div class="col s12 m12 l12">
                  <div id="button-trigger" class="card card card-default scrollspy">
                    <div class="card-content">
                      <div class="row">
                        <div class="col s12">
                          <form id="search">
                            <div class="input-field col s3">
							                <select name="companyId">
							                  <option value="" disabled selected>企业</option>
							                  <option th:each="c : ${companies}" th:value="${c.id}"  th:text="${c.name}">企业1</option>
							                </select>
							              </div>
							              <div class="input-field col s2">
							                <input type="text" name="startDate" id="startDate" class="validate" required>
							                <label for="startDate">开始日期</label>
							                <span class="helper-text" data-error="必填项" data-success="right"></span>
							              </div>
							              <div class="input-field col s2">
							                <input type="text" name="endDate" id="endDate" class="validate" required>
							                <label for="endDate">结束日期</label>
							                <span class="helper-text" data-error="必填项，结束日期不能早于开始日期" data-success="right"></span>
							              </div>
							              <div class="input-field col s4"></div>
							              <div class="input-field col s1">
							                <a class="waves-effect waves-light btn light-blue darken-1 right white-text" href="javascript:settlePreview();" style="margin-right: 30px;"><i class="material-icons right"></i>查询</a>
							              </div>
                          </form>
                        </div>
                        <div class="col s12">
                          <table id="table_body_div">
                            <thead>
                              <tr>
                                <th>序号</th>
							                  <th>企业ID</th>
							                  <th>企业名称</th>
							                  <th>门店ID</th>
							                  <th>门店名称</th>
							                  <th>权益</th>
							                  <th>结算数量</th>
							                  <th>结算单价</th>
							                  <th>结算金额</th>
                              </tr>
                            </thead>
                            <tbody id="tbody">
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                    <div id="settlement-btn" class="card-action hide">
					            <div class="hide">
					              <input type="hidden" name="startDate" id="startDateTemp">
					              <input type="hidden" name="endDate" id="endDateTemp">
					            </div>
					            <div class="input-field col s12">
					              <a class="waves-effect waves-light btn light-blue darken-1 right white-text" href="javascript:printSettlePreview();" style="margin-right: 30px;"><i class="material-icons right"></i>打印</a>
					              <a class="waves-effect waves-light btn light-blue darken-1 right white-text" href="javascript:exportSettlePreview();" style="margin-right: 10px;"><i class="material-icons right"></i>导出</a>
					              <a class="waves-effect waves-light btn light-blue darken-1 right white-text" href="javascript:settle();" style="margin-right: 10px;"><i class="material-icons right"></i>结算</a>
					            </div>
					          </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END: Page Main-->

    <!-- BEGIN: Footer-->

    <div th:replace="common/footer :: footer"></div>
    
    <!-- END: Footer-->
    
    <div id="modal1" class="modal modal-fixed-footer">
	    <div class="modal-header">
	      <h6>选择对账日期</h6>
	      <a class="btn-flat modal-close modal-header-close"><i class="material-icons">close</i></a>
	    </div>
	    <div class="modal-content" style="border: unset; border-radius: 0;">
	      <div class="row">
	        <form class="col s12">
	          <div class="row">
	            <div class="col s6 input-field">
	              <input type="text" name="startDate" id="startDate" class="date-picker validate" required="" disabled>
	              <label for="startDate">开始日期</label>
	              <span class="helper-text" data-error="wrong" data-success="right"></span>
	            </div>
	            <div class="col s6 input-field">
	              <input type="text" name="endDate" id="endDate" class="validate" required="">
	              <label for="endDate">结束日期</label>
	              <span class="helper-text" data-error="wrong" data-success="right"></span>
	            </div>
	          </div>
	        </form>
	      </div>
	    </div>
	    <div class="modal-footer">
	      <a href="#!" class="modal-close waves-effect waves-light btn-flat" style="margin-right: 10px;">取消</a>
	      <button class="btn waves-effect waves-light light-blue darken-1" type="submit" name="action" style="margin-right: 10px;" onclick="editSubmit()">确认</button>
	    </div>
	  </div>
	  
	  <div id="modal2" class="modal modal-fixed-footer">
	    <div class="modal-header">
	      <h6>打印</h6>
	      <a class="btn-flat modal-close modal-header-close"><i class="material-icons">close</i></a>
	    </div>
	    <div class="modal-content" style="border: unset; border-radius: 0;">
	      <div class="row" style="width: 100%;">
	        <div class="col s12" id="printTable">
	          
	        </div>
	      </div>
	    </div>
	    <div class="modal-footer">
	      <a href="#!" class="modal-close waves-effect waves-light btn-flat" style="margin-right: 10px;">取消</a>
	      <button class="btn waves-effect waves-light light-blue darken-1" type="submit" name="action" style="margin-right: 10px;" onclick="print()">确认</button>
	    </div>
	  </div>
	
	  <div th:replace="common/update_pwd :: #modal3"></div>
	
    <!-- BEGIN VENDOR JS-->
    <script src="../../../app-assets/js/vendors.min.js" th:src="@{/app-assets/js/vendors.min.js}" type="text/javascript"></script>
    <!-- BEGIN VENDOR JS-->
    <!-- BEGIN PAGE VENDOR JS-->
    <script src="../../../app-assets/vendors/data-tables/js/jquery.dataTables.min.js" th:src="@{/app-assets/vendors/data-tables/js/jquery.dataTables.min.js}" type="text/javascript"></script>
    <script src="../../../app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js" th:src="@{/app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js}" type="text/javascript"></script>
    <script src="../../../app-assets/vendors/data-tables/js/dataTables.select.min.js" th:src="@{/app-assets/vendors/data-tables/js/dataTables.select.min.js}" type="text/javascript"></script>
    <!-- END PAGE VENDOR JS-->
    <!-- BEGIN THEME  JS-->
    <script src="../../../app-assets/js/plugins.js" th:src="@{/app-assets/js/plugins.js}" type="text/javascript"></script>
    <script src="../../../app-assets/js/custom/custom-script.js" th:src="@{/app-assets/js/custom/custom-script.js}" type="text/javascript"></script>
    <!-- END THEME  JS-->
    <!-- BEGIN PAGE LEVEL JS-->
    <script src="../../../app-assets/js/scripts/data-tables.js" th:src="@{/app-assets/js/scripts/data-tables.js}" type="text/javascript"></script>
    <!-- END PAGE LEVEL JS-->
    <script src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" th:src="@{/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
	  <script src="plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js" th:src="@{/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}" charset="UTF-8"></script>
	  <script src="plugins/bootstrap-sweetalert/sweetalert.min.js" th:src="@{/plugins/bootstrap-sweetalert/sweetalert.min.js}"></script>
    <script src="js/common.js" th:src="@{/js/common.js}"></script>
    <script>
	    var dt = new Date();
	    dt.setMinutes(dt.getMinutes() - dt.getTimezoneOffset() - 1440);
	
	    $(document).ready(function() {
	      $('#endDate').datepicker({
	        format : "yyyy-mm-dd",
	        language : "zh-CN",
	        autoclose : true,
	        endDate: dt
	      }).on('hide', function(e) {
	        M.updateTextFields();
	        M.validate_field($(this));
	      });
	
	      $('#startDate').datepicker({
	        format : "yyyy-mm-dd",
	        language : "zh-CN",
	        autoclose : true,
	        endDate: dt
	      }).on('hide', function(e) {
	        M.updateTextFields();
	        M.validate_field($(this));
	      });
	
	    });
	
	    function selectDate() {
	      var companyId = $('select[name="companyId"]').val();
	      if(companyId == null) {
	        swal("请选择企业!", {
	          icon: "error",
	        });
	        return;
	      }
	      $('#modal1').modal('open');
	    }
	
	    function settlePreview() {
	      var companyId = $('select[name="companyId"]').val();
	      if(companyId == null) {
	        swal("请选择企业!", {
	          icon: "error",
	        });
	        return;
	      }
	      
	      M.validate_field($('#startDate'));
	      M.validate_field($('#endDate'));
	      var startDate = $('#startDate').val();
	      var endDate = $('#endDate').val();
	      var d1 = new Date(startDate.replace(/\-/g, "\/"));
	      var d2 = new Date(endDate.replace(/\-/g, "\/"));
	      if(startDate != "" && endDate != "" && d1 > d2) {
	        //$('#modal1 input[name="startDate"]').addClass("invalid");
	        $('#endDate').addClass("invalid");
	      }
	      var invalid_input_elems = $('#params input.invalid');
	      if(invalid_input_elems.length > 0) {
	        return;
	      }
	
	      var companyId = $('select[name="companyId"]').val();
	      $.ajax({
	        url: context_path + "/api/v1/statements/companies/" + companyId + "/settlePreview/",
	        data: "startDate=" + $("#startDate").val() + "&endDate=" + $("#endDate").val(),
	        type: "POST",
	        success: function(data) {
	          console.log(data);
	          var table_str = '';
	          var totalQuantity = 0;
	          var totalAmount = 0;
	          for(var i = 0; i < data.details.length; i++) {
	            table_str += '<tr>'
	                      +  '<td title="' + (i + 1) + '">' + (i + 1) + '</td>'
	                      +  '<td title="' + data.details[i].companyId + '">' + data.details[i].companyId + '</td>'
	                      +  '<td title="' + data.details[i].companyName + '">' + data.details[i].companyName + '</td>'
	                      +  '<td title="' + data.details[i].storeId + '">' + data.details[i].storeId + '</td>'
	                      +  '<td title="' + data.details[i].storeName + '">' + data.details[i].storeName + '</td>'
	                      +  '<td title="' + data.details[i].activityTitle + '">' + data.details[i].activityTitle + '</td>'
	                      +  '<td title="' + data.details[i].quantity + '">' + data.details[i].quantity + '</td>'
	                      +  '<td title="￥' + data.details[i].price + '">￥' + data.details[i].price + '</td>'
	                      +  '<td title="￥' + data.details[i].amount + '">￥' + data.details[i].amount + '</td>'
	                      +  '</tr>';
	            totalQuantity += data.details[i].quantity;
	            totalAmount += data.details[i].amount;
	          }
	          table_str += '<tr>'
	                +  '<td>总</td>'
	                +  '<td>计：</td>'
	                +  '<td></td>'
	                +  '<td></td>'
	                +  '<td></td>'
	                +  '<td></td>'
	                +  '<td>' + totalQuantity + '</td>'
	                +  '<td></td>'
	                +  '<td>￥' + totalAmount + '</td>'
	                +  '</tr>';
	          $('#tbody').html(table_str);
	          $('#modal1').modal('close');
	          $('#settlement-btn').removeClass('hide');
	          $("#startDateTemp").val($("#startDate").val());
	          $("#endDateTemp").val($("#endDate").val());
	          $("#modal1 input[type=reset]").trigger("click");
	        },
	        error: function(data) {
	            swal({
	                title: "结算失败!",
	                text: data.responseJSON.message,
	                icon: "error",
	              });
	            }
	      });
	    }
	
	    function settle() {
	      var companyId = $('select[name="companyId"]').val();
	      $.ajax({
	        url: context_path + "/api/v1/statements/companies/" + companyId + "/settle/",
	        data: "startDate=" + $("#startDateTemp").val() + "&endDate=" + $("#endDateTemp").val(),
	        type: "POST",
	        success: function(data) {
	          //console.log(data);
	          swal("结算完成!", {
	            icon: "success",
	          });
	          $('select[name="companyId"]').val("");
	          window.location.reload();
	        },
	        error: function(data) {
	          swal({
	            title: "结算失败!",
	            text: data.responseJSON.message,
	            icon: "error",
	          });
	        }
	      });
	    }
	
	    function exportSettlePreview() {
	      var companyId = $('select[name="companyId"]').val();
	      window.location.href = context_path + "/api/v1/statements/companies/" + companyId + "/settlePreview/export?"
	          + "startDate=" + $("#startDateTemp").val() + "&endDate=" + $("#endDateTemp").val();
	    }
	    
	    function printSettlePreview() {
	      $('#modal2').modal('open');
	      $('#printTable').empty();
	      $('#printTable').append($('#tableHead').clone());
	      $('#printTable').append($('#table_body_div').clone().css('height', 'auto'));
	    }
	    
	    function print() {
	      $('#printTable').printArea();
	    }
	
	  </script>
  </body>
</html>